<template>
    <section>
        <!--工具条-->
        <el-row :gutter="20">
            <el-col :span="12"> 
                <div class="grid-content bg-purple"> 
                    <div class="dev-title">设备概述</div>
                </div>
                <div style="padding:12px 15px;height: 300px;" class="col-bg clearfix">
                    <el-col :span="12">
                        <!-- <div class="device_img"> <img :src="imgUrl"></div> -->
                        <div class="device_img"> <img :src="imgUrl?imgUrl:require('../../assets/79761007764060c4e63247c8f2a32ab.png')"></div>

                    </el-col>
                    <el-col :span="12">
                        <div class="device_p">
                            <div class="device_title">
                                <h4 class="ng-binding">{{facility.name}}</h4>
                                <p class="ng-binding">{{facility.deviceSn}}</p>
                            </div>
                            <!-- <p class="ng-binding"><label class="ng-binding">所属用户：</label>{{facility.deviceUserName}}</p> -->
                            <p class="ng-binding"><label class="ng-binding">设备类型：</label>{{facility.deviceTypeName}}</p>
                            <p class="ng-binding"><label class="ng-binding">设备模板：</label>{{facility.deviceTemplateName}}</p>
                            <!-- <p class="ng-binding"><label class="ng-binding">所属终端用户：</label>{{facility.terminalUserName}}</p> -->
                            <!-- <p class="ng-binding"><label class="ng-binding">采集频率：</label>1分钟</p> -->
                            <!-- <p class="ng-binding"><label class="ng-binding">通讯协议：</label>{{facility.protocol}}</p> -->
                            <p class="ng-binding" v-if="facility.deviceModelId!=2"><label class="ng-binding">信号强度： </label>
                                <img v-if="wife<=1" src="../../assets/img/wifi1.png">
                                <img v-else-if="wife<=2" src="../../assets/img/wifi2.png">
                                <img v-else-if="wife<=4" src="../../assets/img/wifi3.png">
                                <img v-else src="../../assets/img/wifi4.png">
                            </p>
                            <p class="ng-binding"><label class="ng-binding">在线状态：</label>{{facility.stateText}}</p>
                            <p class="ng-binding" v-if="menubt.indexOf('/barcode_btn')>-1"><label class="ng-binding">整机条码：</label>{{facility.barCode}}</p>
                            <!-- <p class="ng-binding"><label class="ng-binding">信号强度： </label><span> {{wife}}</span></p> -->
                            <!-- <p class="ng-binding"><label class="ng-binding">设备地址：</label>{{facility.deviceLocation.city}}</p> -->
                        </div>
                    </el-col>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple">

                    <div class="dev-title">设备地图</div>
                </div>
                <div style="padding:12px 15px" class="col-bg clearfix">
                    <div id="allmap" ref="allmap"></div>
                </div>
            </el-col>
            <el-col :span="24" class=" clearfix">
                <div class="grid-content bg-purple">
                    <div class="dev-title">网关信息</div>
                </div>

                <div class="col-bg clearfix">
                    <el-col :span="12">
                        <el-table :data="device_list" highlight-current-row style="width: 100%">
                            <el-table-column  label="串口" >
                                <template scope="scope">
                                    <span class="pb-name" >{{scope.row.attrKey}}
                                        <el-button size="small" title="写串口号" icon="el-icon-edit" @click="fromedit(scope.$index, scope.row)"
                                            circle></el-button>
                                    </span>
                                    
                                </template>
                            </el-table-column>
                          
                        
                            <el-table-column label="波特率" prop="attrValue" >

                            </el-table-column>

                        </el-table>
                    </el-col>
                    <el-col :span="12">
                        <el-table :data="io_list" highlight-current-row style="width: 100%">
                        
                          
                            <el-table-column label="io值" >
                                <template scope="scope">
                                    <span class="pb-name" @click="details(scope.$index, scope.row)">{{scope.row.type}}
                                        <el-button size="small" title="写数据点值" icon="el-icon-edit" @click="fromedit1(scope.$index, scope.row)"
                                            circle></el-button>
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column  label="io模式" prop="mode">

                            </el-table-column>
                            <el-table-column  label="io值" prop="ioValue">

                            </el-table-column>

                        </el-table>
                    </el-col>
                </div>
            </el-col>

        </el-row>

        <!--列表-->
        <!--编辑界面-->
        <el-dialog title="编辑" v-show="editFormVisible" v-model="editFormVisible" @close="editFormVisible=false">
            <div slot="footer" style="text-align: left; ">
                <el-form :model="editForm" label-width="80px" ref="editForm">
                    <!-- <el-form-item label="串口号" prop="serialNo">
                        <el-input v-model="editForm.serialNo" auto-complete="off"></el-input>
                    </el-form-item> -->
                    <el-form-item label="波特率" prop="baudRate">
                        <el-input v-model="editForm.baudRate" auto-complete="off"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label="数据位" prop="dataBits">
                        <el-input v-model="editForm.dataBits" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="停止位" prop="stopBits">
                        <el-input v-model="editForm.stopBits" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="校验位" prop="validBits">
                        <el-input v-model="editForm.validBits" auto-complete="off"></el-input>
                    </el-form-item>
                    <el-form-item label="流控" prop="fluidControl">
                        <el-input v-model="editForm.fluidControl" auto-complete="off"></el-input>
                    </el-form-item> -->
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:right;">
                    <el-button @click.native="editFormVisible = false">取消</el-button>
                    <el-button type="primary" @click.native="editSubmit">提交</el-button>
                </div>
            </div>
        </el-dialog>
        <el-dialog title="编辑" v-show="editFormVisible1" v-model="editFormVisible1" @close="editFormVisible1=false">
            <div slot="footer" style="text-align: left; ">
                <el-form :model="editForm1" label-width="100px" ref="editForm">
                  
                    <el-form-item label=" I/O口模式" prop="baudRate">
                        <el-input v-model="editForm1.mode" auto-complete="off"></el-input>
                    </el-form-item>
                    <!-- <el-form-item label=" I/O口值" prop="ioValue">
                        <el-input v-model="editForm1.ioValue" auto-complete="off"></el-input>
                    </el-form-item> -->
                </el-form>
                <div slot="footer" class="dialog-footer" style="text-align:right;">
                    <el-button @click.native="editFormVisible1 = false">取消</el-button>
                    <el-button type="primary" @click.native="editSubmit1">提交</el-button>
                </div>
            </div>
        </el-dialog>
    </section>
</template>
<script>
    import {
        device_get,
        device_recipe_body_list,
        device_cmd
    } from '../../api/api';
    //import NProgress from 'nprogress'
    export default {
        data() {
            return {
                wife: '',
                imgUrl: '',
                editForm: {
                    serialNo: '',
                    baudRate: '',
                    dataBits: '',
                    stopBits: '',
                    validBits: '',
                    fluidControl: '1'
                },
                editForm1: {
                    type: '',
                    mode: '',
                    ioValue:''
                },
                editFormVisible: false,
                editFormVisible1:false,
                value2: '',
                device_list: [],
                io_list:[],
                filters: {
                    name: ''
                },
                loading: false,
                users: [],
                facility: {}
            }
        },
        methods: {
            scade(index, row) {
                
                // this.$confirm('确认更换吗？', '提示', {}).then(() => {
                let para = {
                    code: 'writeRegister',
                    deviceIdList: [sessionStorage.getItem('facility_details')],
                    attrs: {
                        deviceSlaveSn: row.slaveSn,
                        register: row.register,
                        registerVal: row.registerVal,
                        deviceType: 1
                    }
                };
                this.loading = true;
                //NProgress.start();
                device_cmd(para).then((res) => {
                     this.begCode(res.code,res.message);
                    //NProgress.done();
                });
                // });
            },
            fromedit(index, row) {
                this.editFormVisible = true;
                this.editForm.serialNo = row.attrKey;
            },
            fromedit1(index, row) {
                this.editFormVisible1 = true;
                this.editForm1.type = row.type;
            },
            editSubmit() {
           
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    let para = {
                        code: 'updateSerialPortInfo',
                        deviceIdList: [sessionStorage.getItem('facility_details')],
                        attrs: this.editForm
                    };
                    this.loading = true;
                    //NProgress.start();
                    device_cmd(para).then((res) => {
                         this.begCode(res.code,res.message);

                        this.loading = true;

                        this.editFormVisible = false;
                        //NProgress.done();
                        this.$message({
                        message: '已发送命令',
                        type: 'success'
                    });
                        this.editForm= {
                    serialNo: '',
                    baudRate: '',
                    dataBits: '',
                    stopBits: '',
                    validBits: '',
                }
                        this.value2 = '';
                    });
                });
            },
            editSubmit1() {
              
                this.$confirm('确认提交吗？', '提示', {}).then(() => {
                    let para = {
                        code: 'updateIOModeInfo',
                        deviceIdList: [sessionStorage.getItem('facility_details')],
                        attrs: this.editForm1
                    };
                    this.loading = true;
                    //NProgress.start();
                    device_cmd(para).then((res) => {
                         this.begCode(res.code,res.message);
                        this.$message({
                        message: '已发送命令',
                        type: 'success'
                    });
                        this.loading = true;

                        this.editFormVisible1 = false;
                        //NProgress.done();
                        this.editForm1= {
                        type: '',
                        mode: '',
                        ioValue: ''
                    }
                    });
                });
            },
            //            tableHeaderColor({
            //     row,
            //     column,
            //     rowIndex,
            //     columnIndex
            // }) {
            //     if (rowIndex === 0) {
            //         return 'background-color: #eee;font-weight: 500;'
            //     }
            // },
            //性别显示转换
            handlehisty: function (index, row) {
                this.$router.push({
                    path: "/devices/history"
                });
            },
            formatSex: function (row, column) {
                return row.sex == 1 ? '男' : row.sex == 0 ? '女' : '未知';
            },
            formatwife(row) {
                return row.signalIntensity == 0 ? '很弱' : row.signalIntensity == 1 ? '弱' : row.signalIntensity == 2 ?
                    '一般' : row.signalIntensity ==
                    3 ? '普通' : row.signalIntensity == 4 ? '强' : row.signalIntensity == 5 ? '很强' : ' 未知';
            },
            map1() {
                let map = new BMap.Map(this.$refs.allmap); // 创建Map实例
                // map.centerAndZoom(new BMap.Point(116.404, 39.915), 5);
                map.enableScrollWheelZoom();
                map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别
                map.addControl(
                    new BMap.MapTypeControl({
                        //添加地图类型控件
                        mapTypes: [BMAP_NORMAL_MAP, BMAP_HYBRID_MAP]
                    })
                );

                // var map = new BMap.Map("container");
                var point = new BMap.Point(this.facility.deviceLocation.longitude, this.facility.deviceLocation.latitude);
                map.centerAndZoom(point, 15);
                var marker = new BMap.Marker(point); // 创建标注    
                map.addOverlay(marker);
                var opts = {
                    width: 200, // 信息窗口宽度
                    height: 100, // 信息窗口高度
                    title: "地址信息", // 信息窗口标题
                    enableMessage: true, //设置允许信息窗发送短息
                    message: this.facility.deviceLocation.address + "~"
                }
                var infoWindow = new BMap.InfoWindow(opts.message, opts); // 创建信息窗口对象    
                map.openInfoWindow(infoWindow, map.getCenter()); // 打开信息窗口
                map.addOverlay(marker); // 将标注添加到地图中
                map.centerAndZoom(point, 15);

                var infoWindow = new BMap.InfoWindow("地址:" + this.facility.deviceLocation.address, opts); // 创建信息窗口对象 
                marker.addEventListener("click", function () {
                    map.openInfoWindow(infoWindow, point); //开启信息窗口

                });
                // map.setCurrentCity("北京"); // 设置地图显示的城市 此项是必须设置的
                // map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放

            },
            //获取用户列表
            getUser: function () {
                this.device_list=[];
                this.io_list=[];
                let para = { 
                    deviceId: sessionStorage.getItem('facility_details')
                };
                this.loading = true;
                //NProgress.start();
                device_get(para).then((res) => {
                    // res.code=403;
                     this.begCode(res.code,res.message);
                    for(let i in res.data.attrExtendList){
                        let num=res.data.attrExtendList[i];
                        if(num.attrId=="serialPort"){
                            let tum=JSON.parse(num.attrValue);
                            this.device_list.push(num);

                            console.log( JSON.parse(num.attrValue))
                        }else if(num.attrId=="ioPort"){
                            let tum=JSON.parse(num.attrValue);
                            this.io_list.push({
                                type:tum[0],
                                mode:tum[1],
                                ioValue:tum[2]
                            });
                            console.log(this.io_list)
                        }
                    }
                    this.users = res.data.deviceSlaveList;
                    this.facility = res.data;
                    this.wife = this.formatwife(res.data.deviceAttr);
                    this.loading = false;
                    if (this.imgUrl = res.data.devicePictureList[0].path) {

                        this.imgUrl = res.data.devicePictureList[0].path;
                    } else {
                        // this.imgUrl = 'http://console.usr.cn/uploads/device/nopic.png';
                    }
                    this.map1()
                    //NProgress.done();
                });


            },

        },
        mounted() {

            this.getUser();
        }
    };
</script>

<style scoped>
    .userlist {
        font-size: 14px;
    }

    #allmap {
        height: 300px;
        overflow: hidden;
    }

    .el-row {}

    .el-col {
        border-radius: 4px;
        margin-bottom: 20px;
    }

    .bg-purple-dark {
        background: #99a9bf;
    }

    .bg-purple {
        background: #d3dce6;
    }

    .bg-purple-light {
        background: #e5e9f2;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }

    .row-bg {
        padding: 10px 0;
        background-color: #f9fafc;
    }

    .dev-select {
        width: 100px;
        float: right;
        margin: 3px;
    }

    .dev-title {
        display: inline-block;
        line-height: 36px;
        text-indent: 10px;
        color: #fff
    }

    .device_img {
        width: 100%;
        height: auto;
        text-align: center;
        margin-bottom: 15px;
        border: 1px solid #eee;
    }

    .device_img img {
        max-height: 300px;
        width: 100%;
    }

    .col-bg {
        padding: 12px 15px;
        position: relative;
        height: 100%;
        color: #666666;
        background-color: #ffffff;
        border: none;
        border-radius: 5px;
        border-top-right-radius: 0;
        border-top-left-radius: 0;
        position: relative;
        margin-bottom: 20px;
        box-shadow: 0 5px 5px 0 rgba(0, 0, 0, 0.25);
    }

    .device_title {
        border-bottom: 1px solid #ccc;
        margin-bottom: 5px;
    }

    .device_title h4 {
        line-height: 30px;
        font-size: 16px;
        color: #333;
        margin: 0 auto;
    }

    .device_title p {
        line-height: 30px;
        margin-bottom: 5px;
        font-size: 12px;
        color: #666;
    }

    .device_p p {
        line-height: 26px;
        margin: 0;
        color: #333;
        font-size: 12px;
    }

    .monitor_data_list2 {
        line-height: 26px;
        padding: 15px 0;
        font-size: 12px;
        color: #000;
        clear: both;
        margin: 10px 0;
        background: #eee;
    }

    .el-table tr {
        position: absolute;
        top: 100px
    }

    .el-table {

        background-color: #eee !important;
    }

    .cell {
        padding-left: 10px !important;
    }
</style>